<template>
  <div>
     <div>

          <div  style="margin-top: 5px;background-color: #16161A;padding-bottom: 10px;">
          
            <div>
                <van-grid :border="false" :column-num="3" class="film_imgs" >
                    <van-grid-item v-for="(film,index) in allfilms" :key="index" class="van-grid-item__content">
                      <router-link :to="'/showFilms/' + film.id">
                        <van-image :src="film.image_url" />
                        <div class="film_font"> {{film.title}} </div>
                      </router-link>
                    </van-grid-item>
                  </van-grid>
            </div>

            <div >
              <button class="btn_more" @click="loadMore">加载更多</button>
            </div>
            
          </div>
              
            
       
     </div>

  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  name: 'AllFilms',
  data () {
   return {
    allfilms:[],
    getsize: 18, // 默认展示第一页的电影
   }
  },
  mounted() {
    this.initFilms();
  },
  methods:{
    //加载电影
    loadMore() {
      // 点击按钮，加载更多的电影
      // 当触发这个加载更多方法的时候，应该让 page 页码 + 1 之后，再调用 initFilms 方法
      this.getsize += 18;
      this.initFilms();
      Toast.success('加载成功！');
     
    },
    //获取电影
    initFilms(){
      const _this = this
      this.axios.get("/reqq/filmEs/findAll?page=0&size="+ this.getsize).then(resp=>{
          console.log(resp)
          _this.allfilms = resp.data.data.result.content
      })
    },
  }
}
</script>

<style scoped>
  
  /* 字体 */
 .film_font{
    font-size: 12px;
    text-align: center;
    color: #F6F1E0;
    height: 25px;
    /* width:120px;
    display:block;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis; */
  }
  /* 图片 */
     .film_imgs .van-grid-item .van-image{
      width: 94%;
      height: 160px;
        
    }
      /* 卡片 */
   /deep/ .van-image__img  {
       border-radius: 5px;
    }
    /* 卡片背景 */
    /deep/ .van-grid-item__content {    
      /* background-color: #eee; */
      background-color: #16161A;
      padding: 3px 1px;
    }

</style>